import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';

import TreeItemLabel from './tree-item-label.jsx';

/**
 * 目录节点
 * @class {TreeItemDir}
 * @extends {React.Component}
 */
export default class TreeItemDir extends Component {
    static propTypes = {
        /**
         * 是否收起
         * @type {bool}
         */
        collapsed: PropTypes.bool,

        /**
         * 处理目录展开/关闭
         * @type {Function}
         */
        handleToggleCollapse: PropTypes.func,

        /**
         * 文件路径
         * @type {string}
         */
        path: PropTypes.string,

        /**
         * 文件夹名
         * @type {string}
         */
        name: PropTypes.string
    };

    /**
     * 渲染逻辑
     * @param  {Object} nextProps
     * @return {bool}
     */
    shouldComponentUpdate(nextProps, nextState) {
        const { name, path, collapsed, children } = this.props;

        return name !== nextProps.name ||
            path !== nextProps.path ||
            collapsed !== nextProps.collapsed ||
            children !== nextProps.children;
    }

    render() {
        const { collapsed, handleToggleCollapse, path, name, children } = this.props;
        const className = classNames('tree-view-node dir', {
            collapsed
        });

        return (
            <li className={className}>
                <TreeItemLabel name={name}
                    isDir={true}
                    path={path}
                    onClick={() => handleToggleCollapse(path, collapsed)} />
                <ul className="tree-view-children">
                    {children}
                </ul>
            </li>
        );
    }
}